<template>
<div>
  <div class="layout">
    <div class="register-container">
      <Subtitle
          :text="$t('forget.title')"
          :desc="$t('forget.desc')"
      />
      <IntelInput
          :label="$t('forget.inputText')"
          v-model="email"
          type="text"
          :placeholder="$t('forget.inputText')"
          class="register-input m-t-60"
          :error="!emailValid"
          @blur="handleEmailInputBlur"
          :disabled="loading"
      />
      <IntelInput
          :label="$t('register.captcha')"
          v-model="captcha"
          type="captcha"
          :placeholder="$t('register.captcha')"
          class="register-input m-t-20"
          @request="handleRequestCaptcha"
          :disabled="loading"
          :error="!captchaValid"

      />
      <div class="primary-button m-t-40" @click="handleSubmit" v-show="!loading">{{ $t('forget.buttonText') }}</div>
      <div class="button disabled-button" v-show="loading">{{ $t('forget.loadingText') }}</div>
    </div>
  </div>
  <Alert v-if="alertShow" @ok="() => alertShow = false" :content="alertContent"/>
</div>
</template>

<script>
import IntelInput from "../../components/common/IntelInput";
import Subtitle from "../../components/common/Subtitle";
import {getUserInfo, register, sendResetPasswordEmail, validEmail} from "../../api/service";
import Alert from "../../components/common/Alert";

export default {
  name: "faq",
  components: {
    IntelInput,
    Subtitle,
    Alert
  },
  data () {
    return {
      email: '',
      emailValid: true,
      alertShow: false,
      alertContent: '',
      captcha: '',
      captchaValid: true,
      requestCaptchaCode: '',
      loading: false
    }
  },
  methods: {
    handleButtonClick () {
      if (this.checkbox) {
        this.$router.push({
          path: this.$i18n.path('nameConfirm')
        })
      } else {
        this.alertShow = true
      }
    },
    handleEmailInputBlur () {
      const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      console.log(reg.test(this.email))
      if (reg.test(this.email)) {
        this.validEmail()
      } else {
        this.emailValid = false
        this.alertShow = true
        this.alertContent = this.$t('alert.emailError')
      }
    },
    validEmail () {
      validEmail({ email: this.email }).then(res => {
        console.log(res)
        if (res.data) {
          this.emailValid = false
          this.alertShow = true
          this.alertContent = this.$t('alert.notInvite')
        } else {
          this.emailValid = true
        }
      })
    },
    handleRequestCaptcha (code) {
      this.requestCaptchaCode = code
    },
    handleSubmit () {
      const params = {
        businessEmailAddress: this.email,
        imgVerifyCode: this.captcha,
        imgVerifyCodeRequestId: this.requestCaptchaCode
      }
      if (this.validEmail && this.email && this.captchaValid && this.requestCaptchaCode) {
        this.loading = true
        sendResetPasswordEmail(params).then(res => {
          this.loading = false
          console.log(res)
          if (res.code === 200) {
            this.$router.push({
              path: this.$i18n.path('forgetPasswordP2')
            })
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.register-container {
  width: 800px;
  padding-top: 60px;
  padding-left: 120px;
  padding-bottom: 120px;
}
.create-text .title {
  font-weight: bold;
  font-size: 20px;
  color: #0068B5;
  padding-bottom: 18px;
}
.create-text .desc {
  font-size: 14px;
  color: #999999;
}

.create-text .desc a {
  color: #0068B5;
  text-decoration: none;
}
.register-confirm {

}
.register-confirm .subtitle {
  font-weight: bold;
  font-size: 20px;
  color: #0068B5;
}
.primary-button {
  width: 146px;
  height: 36px;
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  background: #0068B5;
  cursor: pointer;
  margin-top: 16px;
}

.m-t-60 {
  margin-top: 60px;
}
.m-t-40 {
  margin-top: 40px;
}
.m-t-20 {
  margin-top: 20px;
}
.text {
  white-space: pre-line;
  font-size: 14px;
  color: #999999;
}
span,
.email {
  font-size: 14px;
  color: #0068B5;
}

</style>
